<template>
	<view class="pages">
		<uni-drawer ref="showProfile" style="background-color: transparent;" side="left"
		    :mask="true" :width="300">
		      <profile :isDrawer="true"></profile>
		</uni-drawer>
		<filter-popup :data="filterData" :form.sync="filterForm" v-model="showFilter" title="全部筛选"
			:height="windowHeight*2/3+'px'" @finsh="onFilterFinsh"></filter-popup>
		<sort-popup ref="sortPopup" :selected="sortParams" @confirm="handleSortConfirm" />
		<search-panel ref="searchPanelRef" v-model="searchWord" @search="handleSearch" @popup-change="onPopupChange">
		</search-panel>
		<chunLei-popups theme="dark" v-model="showMenu" :popData="menuPopData" @tapPopup="tapMenuPopup" :x="352" :y="36" placement="top-end">
		</chunLei-popups>
		<detail-popup  ref="detailPopup" :item="currentSelectItem" mode="bottom" 
		    :dark-mode="true"  @searchByTags="handleSearchByTags" @searchByGens="handleSearchByGens"
			@searchByPeople="handleSearchByPeople"  @clickSetMedia="clickSetMediaDetail"
			@clickSimilarMedia="clickSimilarMediaDetail"></detail-popup>
		<mvBar :mysNavConfig="mysNavConfig">
			<view slot="right" class="right" style="display: flex;align-items: center;" @tap="openSortPopup">
				<image class="img" style="width: 20px;height: 20px;" src="/static/sort_w.png"></image>
			</view>
			<view slot="right" class="right" style="display: flex;align-items: center;" @tap="openMenuPopup">
				<image class="img" style="width: 20px;height: 20px;" src="/static/icon/more (1).png"></image>
			</view>
			<view slot="left" class="left" style="display: flex;align-items: center;margin-left: 20px;" @tap="openProfilePopup">
				<image class="img" style="width: 20px;height: 20px;" src="/static/icon/menu (1).png"></image>
			</view>
		</mvBar>
		<view class="search-result">
			<scroll-view show-scrollbar="true" :style="{ height: scrollHeight + 'px' }" scroll-y="true"
				:refresher-enabled="isOpenRefresh" :refresher-triggered="triggered" :refresher-threshold="100"
				refresher-background="gray" @scrolltolower="scrolltolowerFun" @refresherpulling="onPulling"
				@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
				<view class="search-result-word">
					<shortlist :list="dataList" :httpParams="httpParams" 
					:is-multi-select="isMultiSelect" 
					:selected-ids="selectedIds"
					@toggle-select="handleToggleSelect"
					@open-detailPopup="openDetailPopup" />
				</view>
				<uni-load-more v-if="!isOpenRefresh" iconType="circle" :status="status" />
				<view style="height: calc(100rpx + env(safe-area-inset-bottom))">
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import shortlist from '@/components/vertical.vue'
	import request from '@/common/request'
	import store from '@/store/index.js'
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import SortPopup from '@/components/sort-popup.vue';
	import SearchPanel from '@/components/search-panel.vue'
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue";
	import detailPopup from '@/components/detail-popup.vue';
	import filterDict from '@/pages/filter-prop.js';
	import mysNavConfig from '@/pages/profile/favoriteNavConfig.js';
	import profile from '@/pages/profile/profile.vue'

	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex' // 引入辅助函数

	export default {
		components: {
			shortlist,
			mvBar,
			SortPopup,
			SearchPanel,
			chunLeiPopups,
			detailPopup,
			profile
		},
		data() {
			return {
				dataList: [],
				videoCount: 0,
				videoPageNo: 1,
				videoPageSize: 100,
				loading: false, // 加载状态锁（防止重复请求）
				triggered: false,
				isOpenRefresh: true, // 是否开启下拉
				status: 'noMore',
				hasMore: true,
				scrollHeight: 0, // 滚动区域高度
				searchBarHeight: 80, // 搜索框高度(rpx)
				windowWidth: 0, //获取屏幕宽度🌟💗
				windowHeight: 0,
				tabberHeight: 0, //测试高度🌟💗
				httpParams: {},
				mysNavConfig: mysNavConfig,
				showFilter: false,
				filterData: JSON.parse(JSON.stringify(filterDict)),
				searchWord: '',
				showMenu: false,
				baseMenuPopData: [
				{"title":"多选","icon":"/static/moreselect_w.png","type":"isMultiSelect"},
				{"title":"筛选","icon":"/static/filter_w.png","type":"filter"},
				{"title":"排序","icon":"/static/sort_w.png","type":"sort"},
				{"title":"搜索","icon":"/static/search.png","type":"search"},
				{"title":"播放","icon":"/static/play_w.png","type":"play"},
				{"title":"随机播放","icon":"/static/random1.png","type":"rplay"}],
				isMultiSelect: false,
				selectedIds: [], // 选中的视频ID集合
				/* 详情弹窗配置 */
				currentSelectItem: {},
			}
		},
		computed: {
			...mapState(['favoriteItem','delVideoId']),
			styleWidthHeight() {
				let sty = `width: ${this.windowWidth}px; height: ${ this.windowHeight - this.tabberHeight }px;`
				return sty
			},
			sortParams() {
				const {
					sortParams
				} = this.$store.state;
				return {
					...sortParams
				};
			},
			filterForm: {
				get() {
					const {
						filterParams
					} = this.$store.state;
					return {
						...filterParams
					};
				},
				set(newValue) {
					this.$store.commit('filterParams', newValue);
					uni.setStorageSync('filterParams', JSON.stringify(newValue))
				}
			},
			menuPopData() {
			    // 复制基础菜单（避免直接修改原数组）
			    const menuData = [...this.baseMenuPopData];
			    
			    if (this.isMultiSelect) {
			      // 当多选模式开启时，在"多选"选项后插入全选和取消全选
			      // 找到"多选"选项的索引位置（这里是索引0）
			      const insertIndex = 1;
			      // 插入全选和取消全选选项
			      menuData.splice(insertIndex, 0, 
			        {"title":"全部选择","icon":"/static/allselect3.png","type":"selectAll"},
			        {"title":"取消全选","icon":"/static/unallselect4.png","type":"unselectAll"},
					{"title":"删除已选","icon":"/static/delete_w.png","type":"delete"},
			      );
			    }
			    
			    return menuData;
			}
		},
		onLoad() {
			// 计算滚动区域高度
			this.calculateScrollHeight();

			// 监听窗口尺寸变化，重新计算高度
			uni.onWindowResize(() => {
				this.calculateScrollHeight();
			});
			this.requestReset()
			this._freshing = false;
			
			this.filterData = JSON.parse(JSON.stringify(filterDict));
			this.$delete(this.filterData, 4);
			
			this.windowWidth = uni.getSystemInfoSync().screenWidth
			this.windowHeight = uni.getSystemInfoSync().screenHeight

			this.platform = uni.getSystemInfoSync().platform
			const model = uni.getSystemInfoSync().model
			if (
				this.platform == 'ios' &&
				(model !== 'iPhone6' ||
					model !== 'iPhone6s' ||
					model !== 'iPhone7' ||
					model !== 'iPhone8')
			) {
				this.tabberHeight = 50 + 32
			} else {
				this.tabberHeight = 50
			}
			this.getAllMedia()
			this.getSearchList()
		},
		onUnload() {
			// 移除窗口尺寸变化监听
			uni.offWindowResize((res) => {});
		},
		watch: {
			favoriteItem(favObj) {
			   if(!favObj || !favObj.Id){
					return;
			   }
			  // 当收藏列表变化时更新本地数据
			  for (const videoItem of this.dataList) {
				  if(videoItem.Id==favObj.Id){
					  videoItem.UserData.IsFavorite = favObj.IsFavorite
					  break;
				  }
			  }
			},
			delVideoId(videoId) {
				// console.log("找到匹配项"+videoId)
			   if(!videoId){
					return;
			   }
			   
			  // 当收藏列表变化时更新本地数据
			  for (let i = 0; i < this.dataList.length; i++) {
			    const videoItem = this.dataList[i];
			    if (videoItem.Id == videoId) {
			      // 找到匹配项，删除当前项
				  // console.log("找到匹配项，删除当前项")
			      this.dataList.splice(i, 1); // 从索引i开始，删除1项
			      break; // 找到后退出循环
			    }
			  }
			}
		},
		onNavigationBarButtonTap(e) {
			if (this.showFilter) {
				this.showFilter = false
			} else {
				this.showFilter = true
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showFilter) {
				this.showFilter = false
				return true
			}
		},
		methods: {
			openProfilePopup(){
				this.$refs.showProfile.open();
			},
			handleSearchByTags(tags) {
				let seriesParams = {
					ParentType: "Tag",
					ChildIds: tags.map(item => item.Id).join(','),
					ParentName: tags.map(item => item.Name).join(',')
				}
				uni.navigateTo({
					url: `/pages/series/goDetail?params=${encodeURIComponent(JSON.stringify(seriesParams))}`
				})
			},
			handleSearchByGens(tags) {
				let seriesParams = {
					ParentType: "Genre",
					ChildIds: tags.map(item => item.Id).join(','),
					ParentName: tags.map(item => item.Name).join(',')
				}
				uni.navigateTo({
					url: `/pages/series/goDetail?params=${encodeURIComponent(JSON.stringify(seriesParams))}`
				})
			},
			handleSearchByPeople(people) {
				let seriesParams = {
					ParentType: "People",
					ChildIds: people.Id,
					ParentName: people.Name
				}
				uni.navigateTo({
					url: `/pages/series/goDetail?params=${encodeURIComponent(JSON.stringify(seriesParams))}`
				})
			},
			clickSetMediaDetail(videoItem){
				this.currentSelectItem = videoItem
				this.$refs.detailPopup.open()
			},
			clickSimilarMediaDetail(videoItem){
				this.currentSelectItem = videoItem
				this.$refs.detailPopup.open()
			},
			clickPlayMenu() {
				let reqParamsObj = this.handleReqParams();
				reqParamsObj.StartIndex=0
				reqParamsObj.Limit=300
				reqParamsObj.IncludeItemTypes="Movie,Video"
				reqParamsObj.IsFolder=false
				reqParamsObj.ProjectToMedia=true
				
				let userTmp1 = uni.getStorageSync('user')
				let userTmp = JSON.parse(userTmp1)
				let requestUrlShort = `/emby/Users/${userTmp.userId}/Items`
				let reqParams = {
					params: reqParamsObj,
					url: requestUrlShort
				}
				// #ifdef APP
				this.$store.dispatch('saveLargeList', {
					data: [],
					index: 0,
					httpParams: reqParams
				}).then(()=>{
					uni.navigateTo({
						url: `/pages/player/app/short`
					})
				})
				// #endif
				// #ifndef APP
				this.$store.dispatch('saveLargeList', {
					data: this.dataList,
					index: 0
				})
				uni.navigateTo({
					url: '/pages/player/web/short'
				})
				// #endif
			},
			clickrPlayMenu() {
				let reqParamsObj = this.handleReqParams();
				reqParamsObj.StartIndex=0
				reqParamsObj.Limit=300
				reqParamsObj.IncludeItemTypes="Movie,Video"
				reqParamsObj.IsFolder=false
				reqParamsObj.ProjectToMedia=true
				reqParamsObj.SortBy="Random"
				reqParamsObj.SortOrder="Ascending"
				
				let userTmp1 = uni.getStorageSync('user')
				let userTmp = JSON.parse(userTmp1)
				let requestUrlShort = `/emby/Users/${userTmp.userId}/Items`
				let reqParams = {
					params: reqParamsObj,
					url: requestUrlShort
				}
				// #ifdef APP
				this.$store.dispatch('saveLargeList', {
					data: [],
					index: 0,
					httpParams: reqParams
				}).then(()=>{
					uni.navigateTo({
						url: `/pages/player/app/short`
					})
				})
				// #endif
				// #ifndef APP
				this.$store.dispatch('saveLargeList', {
					data: this.dataList,
					index: 0
				})
				uni.navigateTo({
					url: '/pages/player/web/short'
				})
				// #endif
			},
			// 切换多选模式
			toggleMultiSelect() {
			  this.isMultiSelect = !this.isMultiSelect;
			  if (!this.isMultiSelect) {
				this.selectedIds = []; // 退出多选时清空选择
				this.menuPopData[0].title="多选"
			  }else{
				this.menuPopData[0].title="取消多选"
			  }
			},
			// 处理选择状态变化
			handleToggleSelect(id) {
			  const index = this.selectedIds.indexOf(id);
			  if (index > -1) {
				this.selectedIds.splice(index, 1);
			  } else {
				this.selectedIds.push(id);
			  }
			},
			// 全选
			selectAll() {
			  this.selectedIds = this.dataList.map(item => item.Id);
			},
			// 取消全选
			cancelSelectAll() {
			  this.selectedIds = [];
			},
			// 删除所选
			async deleteSelected() {
			  if (this.selectedIds.length === 0) {
				uni.showToast({ title: '请选择要删除的项目', icon: 'none' });
				return;
			  }
			  
			  uni.showModal({
				title: '确认删除',
				content: `确定要删除选中的 ${this.selectedIds.length} 项吗？`,
				success: async (res) => {
				  if (res.confirm) {
					uni.showLoading({ title: '删除中...' });
					try {
					  const userTmp = JSON.parse(uni.getStorageSync('user'));
					  // 批量删除接口调用
					  await request.post(`/emby/Items/Delete?Ids=${this.selectedIds.join(',')}&`);
					  // 刷新数据
					  this.requestReset();
					  await this.getSearchList();
					  this.selectedIds = [];
					  this.isMultiSelect = false;
					  uni.showToast({ title: '删除成功' });
					} catch (err) {
					  console.error('删除失败', err);
					  uni.showToast({ title: '删除失败', icon: 'none' });
					} finally {
					  uni.hideLoading();
					}
				  }
				}
			  });
			},
			tapMenuPopup(e){
				switch(e.type) {
				  case 'isMultiSelect':
				   this.toggleMultiSelect()
					break;
				  case 'selectAll':
					// 全选逻辑
					this.selectAll()
					break;
				  case 'unselectAll':
					// 取消全选逻辑
					this.cancelSelectAll()
					break;
				  case 'delete':
					this.deleteSelected()
					break;
				  case 'filter':
					this.onFilterClick()
					break;
				  case 'sort':
					this.openSortPopup()
					break;
				  case 'search':
					this.onSearchClick()
					break;
				  case 'play':
					this.clickPlayMenu()
					break;
				  case 'rplay':
					this.clickrPlayMenu()
					break;
				}
			},
			async getAllMedia() {
				let userTmp1 = uni.getStorageSync('user')
				if (!userTmp1) {
					return
				}
				let userTmp = JSON.parse(userTmp1)
				const data = await request.get(`/emby/Users/${userTmp.userId}/Views`)
				let serverUrl = `${userTmp.serverip}:${userTmp.serverport}`
				if (!serverUrl.startsWith('http')) {
					serverUrl = `http://${serverUrl}`
				}
				let searchFilterTmp = []
				for (const item of data.Items) {
					searchFilterTmp.push({
						title: item.Name,
						value: item.Id
					})
				}
				this.filterData[0].data = searchFilterTmp
			},
			// 弹窗状态变化时触发（打开/关闭）
			onPopupChange(e) {
				// e为true时弹窗打开，false时关闭
				if (!e) {
					// 弹窗关闭时可执行额外逻辑（如隐藏键盘）
					uni.hideKeyboard();
				}
			},
			// 处理搜索
			handleSearch(word) {
				this.searchWord = word;
				this.requestReset();
				this.$refs.searchPanelRef.closePopup();
				this.getSearchList();
			},
			// 处理排序确认
			handleSortConfirm(sortResult) {
				this.requestReset()
				this.getSearchList()
			},
			onFilterClick() {
				this.showFilter = true
			},
			onSearchClick() {
				this.$refs.searchPanelRef.openPopup();
			},
			changeInput(e) {
				let value = e.detail.value;
				console.log(value);
				this.mysNavConfig.searchConfig.value = value;
			},
			clearInput() {
				console.log("清空");
				this.mysNavConfig.searchConfig.value = "";
			},
			submitInput(e) {
				let value = e.detail.value;
				console.log(value, "提交");
			},
			openSortPopup() {
				this.$refs.sortPopup.open()
			},
			openMenuPopup() {
				this.showMenu = true
			},
			openDetailPopup(item) {
				this.currentSelectItem = item
				this.$refs.detailPopup.open()
			},
			onFilterFinsh(e) {
				this.requestReset()
				this.getSearchList()
			},
			calculateScrollHeight() {
				// 获取系统信息
				uni.getSystemInfo({
					success: (res) => {
						// 将rpx转换为px (750rpx = 屏幕宽度)
						const pxPerRpx = res.windowWidth / 750;
						const searchBarHeightPx = this.searchBarHeight * pxPerRpx;
						// 滚动区域高度 = 窗口高度 - 搜索框高度
						this.scrollHeight = res.windowHeight - (this.tabberHeight || 0) - 44;
					}
				});
			},
			/**
			 * 搜索
			 * @param {Object} word
			 */
			async getSearchList() {
				//搜索结果成功以后再跳
				if (this.loading || !this.hasMore) {
					return;
				}
				uni.showLoading({
					title: '搜索中'
				});
				let userTmp1 = uni.getStorageSync('user')
				if (!userTmp1) {
					return
				}
				this.loading = true;
				let userTmp = JSON.parse(userTmp1)
				this.videoPageNo = (this.videoPageNo <= 0 ? 1 : this.videoPageNo)
				let getJSON = this.handleReqParams();
				let urlAppend = this.$g.jsonToGetParams(getJSON)
				let requestUrlShort = `/emby/Users/${userTmp.userId}/Items`
				let requestUrl = `${requestUrlShort}${urlAppend}`
				const data = await request.get(requestUrl)
				let videoList = data.Items
				this.videoCount = data.TotalRecordCount
				// console.log("请求返回数据" + JSON.stringify(videoList))
				if (!videoList || videoList.length == 0) {
					this.hasMore = false;
					this.loading = false;
					uni.hideLoading();
					return
				}
				let serverUrl = `${userTmp.serverip}:${userTmp.serverport}`
				if (!serverUrl.startsWith('http')) {
					serverUrl = `http://${serverUrl}`
				}
				for (const item of videoList) {
					let imageStr = `${serverUrl}/emby/Items/${item.Id}/Images/Primary`
					item.cover = imageStr
					item.playIng = false
				}
				this.dataList = [...this.dataList, ...videoList];
				uni.hideLoading();
				this.loading = false; // 释放锁
				this.httpParams = {
					params: getJSON,
					url: requestUrlShort
				}
			},
			handleReqParams(){
				let getJSON = {
					Fields: "BasicSyncInfo,CanDelete,PrimaryImageAspectRatio,ProductionYear,Status,EndDate,Width,Height,Size,Tags,DateCreated",
					StartIndex: (this.videoPageNo - 1) * this.videoPageSize,
					SortBy: "SortName",
					SortOrder: "Ascending",
					EnableImageTypes: "Primary,Backdrop,Thumb",
					ImageTypeLimit: 1,
					Recursive: true,
					IsFavorite: true,
					// GroupProgramsBySeries: true,
					IncludeSearchTypes: false,
					Limit: this.videoPageSize
				}
				// 筛选关联
				if (this.filterForm.ParentId && this.filterForm.ParentId.length > 0) {
					getJSON.ParentId = this.filterForm.ParentId[0]
				} else {
					getJSON.ParentId = ''
				}
				if (this.filterForm.IncludeItemTypes && this.filterForm.IncludeItemTypes.length > 0) {
					getJSON.IncludeItemTypes = this.filterForm.IncludeItemTypes.join()
				} else {
					getJSON.IncludeItemTypes = 'Movie,Video'
				}
				if (this.filterForm.GroupItemsIntoCollections &&
					this.filterForm.GroupItemsIntoCollections.length > 0 &&
					this.filterForm.GroupItemsIntoCollections[0] == true) {
					getJSON.GroupItemsIntoCollections = true
				} else {
					getJSON.GroupItemsIntoCollections = ''
				}
				let playStatusFilter = this.filterForm["Filters-PlayStatus"] || []
				let pavoriteFilter = this.filterForm["Filters-FavoriteStatus"] || []
				getJSON.Filters = [...playStatusFilter, ...pavoriteFilter].join()
				// 排序关联
				if (this.sortParams.SortBy) {
					getJSON.SortBy = this.sortParams.SortBy
					getJSON.SortOrder = this.sortParams.SortOrder
				}
				// 搜索关键词
				if (this.searchWord) {
					getJSON.SearchTerm = this.searchWord
				} else {
					getJSON.SearchTerm = ""
				}
				return getJSON
			},
			requestReset() {
				this.hasMore = true;
				this.videoPageNo = 1;
				this.dataList = []
			},
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
					this.requestReset();
					this.getSearchList()
				}, 500);
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			// 自定义下拉刷新被中止
			onAbort() {
				// console.error("onAbort");
			},
			//上拉加载，页面滑动到底部加载分页数据
			scrolltolowerFun() {
				if (!this.hasMore) {
					this.status = 'noMore';
					return
				}
				this.status = 'loading'
				this.videoPageNo++
				this.getSearchList()
			}
		}
	}
</script>

<style scoped>
	.top {
		font-size: 1rem;
		margin: 3px 0;
		padding-bottom: 8px;
		border-bottom: 1px solid #555;
	}

	.top text {
		margin-right: 20px;
	}

	.top .active {
		font-weight: bold;
		padding: 0 4px 0 2px;
		padding-bottom: 8px;
		border-bottom: 2px solid orangered;
	}

	.search-result-word {
		.search-result-word {
			margin-top: 20rpx;
		}
	}

	.left {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		padding-left: 6px;
	}

	.info-text {
		color: #000000;
	}

	.filter-info {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	.filter_foot {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 50px;
		font-size: 14px;
		color: #4A90E2;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.filter_reset {
		color: #ff000099;
		background-color: #ff980024;
		border-radius: 4px;
		padding: 10px;
		margin: 10px;
		width: 50%;
		text-align: center;
	}

	.filter_sure {
		color: #fff;
		background-color: #ff000099;
		border-radius: 4px;
		padding: 10px;
		margin: 10px;
		width: 50%;
		text-align: center;
	}

	.player-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 16px;

		.player-item {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 11px 22px;
			margin-right: 11px;
			margin-bottom: 11px;
			overflow: hidden;
			font-size: 16px;
			color: #007aff;
			background-color: #f5f5f5;
			border-radius: 572px;
		}
	}

	.popup-content {
		width: 100%;
		max-height: 80vh;
		/* 弹窗高度不超过屏幕80% */
		background-color: #fff;
		border-top-left-radius: 20rpx;
		/* 顶部圆角 */
		border-top-right-radius: 20rpx;
		overflow-y: auto;
		/* 内容超出时可滚动 */
	}
	::v-deep .my_right_icon {
		width: 80px;
		justify-content: space-around;
	}
	
	::v-deep .my_right_icon .img{
		height: 16px;
		width: 16px;
	}
	
	::v-deep .my_right_icon .right{
		display: flex;
		align-items: center;
	}
	
	::v-deep .my_left_icon {
		width: 50px;
		justify-content: space-around;
		margin-left: 0;
	}
	
	::v-deep .my_left_icon .left {
		display: flex;
		align-items: center;
	}
	
	::v-deep .my_left_icon .img {
		height: 16px;
		width: 16px;
	}
	
	::v-deep .solid-bottom {
		display: flex;
		align-items: center;
	}
	.filter-popup{
		margin-bottom: 80px;
	}
	::v-deep .sort-popup{
		margin-bottom: 80px;
	}
</style>